<template>
	<view class="video-device-form">
		<!-- 视频设备信息 -->
		<view class="video-device-container">
			<view class="form-header">
				<text class="header-title">视频设备信息</text>
			</view>
			<view class="video-device-info">
				<view class="info-item">
					<text class="label">视频设备名称:</text>
					<uni-easyinput disabled :clearable="false" v-model="station.name" trim="true"></uni-easyinput>
				</view>
				<!-- 		<view class="info-item">
					<text class="label">视频编码:</text>
					<uni-easyinput :clearable="false" v-model="videoDeivceInfo.code" trim="true"></uni-easyinput>
				</view> -->


				<view class="info-item">
					<text class="label">IP:</text>
					<uni-easyinput disabled :clearable="false" v-model="station.nvrIp" trim="true"></uni-easyinput>
				</view>
				<view class="info-item">
					<text class="label">用户名:</text>
					<uni-easyinput disabled :clearable="false" v-model="station.videoData.videoUsername"
						trim="true"></uni-easyinput>
				</view>
				<view class="info-item">
					<text class="label">密码:</text>
					<uni-easyinput disabled :clearable="false" v-model="station.videoData.videoPassword"
						trim="true"></uni-easyinput>
				</view>
			</view>
		</view>


		<!-- 视频 -->
		<view class="video">

			<view class="control-title">
				云台
			</view>

			<!-- 	<view v-html="article" class="video-preview2">
			</view> -->

			<!-- <web-view src="/static/video.html"></web-view> -->


			<view class="video-preview">
				<video id="video1" :muted="muted" :controls="false" :autoplay="true" :src="encodeURI(videoSrc)"></video>
			</view>



			<view class="video-control">
				<!-- 视频控制按钮 -->
				<view class="flex-width">
					<view class="control-btn-container">
						<button @touchend="moveStop(index)" @touchstart="moveStart(index)" class="control-btn"
							v-for="(item, index) in imgList" :key="index">
							<image :src="getImageSrc(index)" alt="" class="icon" />
						</button>
						<!-- 		<view class="control-btn" v-for="(item, index) in imgList" :key="index"
							@touchstart="touchstart1(index)" @touchend="moveStop(index)">
							<image :src="getImageSrc(index)" alt="" class="icon" style="width: 25px; height:25px;" />
						</view> -->
					</view>
					<view class="control-enablebtn-container">
						<button class="control-btn" v-for="(item,index) in enableImageList" :key="index"
							@touchstart="moveStartEnable(index)" @touchend="moveStopEnable(index)">
							<image :src="getEnableImageSrc(index)" alt="" class="icon" />
						</button>
					</view>
					<view class="flex-space">
						<view class="control-btn-start">
							<!-- <button class="start-button" type="primary" @click="mp4_open()">播放</button> -->
							<!-- <button class="stop-button" type="warn" @click="mp4_close()">停止</button> -->
						</view>
					</view>
				</view>
				<view>
					<slider min="0" max="10" value="5" @change="sliderChange" show-value />
				</view>
			</view>

		</view>

		<!-- 参数配置 -->
		<div class="parameter-container">
			<div class="parameter-section">
				<div class="control-title">图像参数配置</div>
				<div class="flex">
					<div class="parameter-row">
						<label class="parameter-label">主码流</label>
						<uni-forms ref="videoForm1" :modelValue="videoParams1" :rules="ruler1">
							<view class="form-row">
								<uni-forms-item label="视频编码" required name="compression" class="info-item"
									label-width=60>
									<uni-data-select v-model="videoParams1.compression" :clear="false"
										:localdata="option2" placeholder="请选择视频编码" />
								</uni-forms-item>

								<uni-forms-item label="分辨率" required name="resolution" class="info-item" label-width=60>
									<uni-data-select v-model="videoParams1.resolution" :clear="false"
										:localdata="option1" placeholder="请选择分辨率" />
								</uni-forms-item>

								<uni-forms-item label="码流控制模式" required name="bitRateControl" class="info-item"
									label-width=60>
									<uni-data-select v-model="videoParams1.bitRateControl" :clear="false"
										:localdata="option3" placeholder="请选择码流控制模式" />
								</uni-forms-item>

								<uni-forms-item label="图像质量" required name="quality" class="info-item" label-width=60>
									<uni-data-select v-model="videoParams1.quality" :clear="false" :localdata="option4"
										placeholder="请选择图像质量" />
								</uni-forms-item>

								<uni-forms-item label="码率上限" required name="bitRate" class="info-item" label-width=60>
									<uni-combox v-model="videoParams1.bitRate" :clear="false" :candidates="candidates1"
										placeholder="请选择码率上限" />
								</uni-forms-item>

								<uni-forms-item label="视频帧率" required name="fps" class="info-item" label-width=60>
									<uni-combox v-model="videoParams1.fps" :clear="false" :candidates="candidates2"
										placeholder="请选择视频帧率" />
								</uni-forms-item>

								<uni-forms-item label="I帧间隔" required name="gop" class="info-item" label-width=60>
									<uni-combox v-model="videoParams1.gop" :clearable="false" :candidates="candidates3"
										placeholder="请输入I帧间隔" />
								</uni-forms-item>
							</view>
						</uni-forms>
					</div>

					<div class="parameter-row">
						<label class="parameter-label">子码流</label>
						<uni-forms ref="videoForm2" :modelValue="videoParams2" :rules="ruler1">
							<view class="form-row">
								<uni-forms-item label="视频编码" required name="compression" class="info-item"
									label-width=60>
									<uni-data-select v-model="videoParams2.compression" :clear="false"
										:localdata="option2" placeholder="请选择视频编码" />
								</uni-forms-item>
								<uni-forms-item label="分辨率" required name="resolution" class="info-item">
									<uni-data-select v-model="videoParams2.resolution" :clear="false"
										:localdata="option1" placeholder="请选择分辨率" />
								</uni-forms-item>

								<uni-forms-item label="码流控制模式" required name="bitRateControl" class="info-item"
									label-width=60>
									<uni-data-select v-model="videoParams2.bitRateControl" :clear="false"
										:localdata="option3" placeholder="请选择码流控制模式" />
								</uni-forms-item>

								<uni-forms-item label="图像质量" required name="quality" class="info-item" label-width=60>
									<uni-data-select v-model="videoParams2.quality" :clear="false" :localdata="option4"
										placeholder="请选择图像质量" />
								</uni-forms-item>

								<uni-forms-item label="码率上限" required name="bitRate" class="info-item" label-width=60>
									<uni-combox v-model="videoParams2.bitRate" :clear="false" :candidates="candidates1"
										placeholder="请选择码率上限" />
								</uni-forms-item>

								<uni-forms-item label="视频帧率" required name="fps" class="info-item" label-width=60>
									<uni-combox v-model="videoParams2.fps" :clear="false" :candidates="candidates2"
										placeholder="请选择视频帧率" />
								</uni-forms-item>

								<uni-forms-item label="I帧间隔" required name="gop" class="info-item">
									<uni-combox v-model="videoParams2.gop" :clearable="false" :candidates="candidates3"
										placeholder=" 请输入I帧间隔" />
								</uni-forms-item>
							</view>
						</uni-forms>
					</div>


				</div>
				<div v-if="station.pageName=== 'videoConfigure' " class=" button-container">
					<button type="primary" class="copy-button" @click="copy()">复制到所有</button>
					<button type="primary" class="save-button" @click="submitVideoConfig()">保存</button>
				</div>
			</div>
		</div>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		onMounted,
		reactive,
		watch,
		watchEffect
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	// import {
	// 	MPlayer
	// } from '@/js_sdk/player.js'
	import {
		WEB_URL
	} from '../../config/global';
	import { getJsonData } from '../../js_sdk/file';

	const station = ref()
	const platformData = ref()
	const firstInit1 = ref(1)
	const muted = ref(true)
	const firstInit2 = ref(1)
	const videoData = ref({
		videoUsername: '',
		videoPassword: ''
	})
	const speed = ref()
	const article = ref()
	const videoForm1 = ref()
	const autoplay = ref(true)
	const videoForm2 = ref()
	const candidates1 = ref([16, 32, 64, 128, 192, 256, 320, 512, 768, 1024, 1536, 2048, 3072, 4096])
	const candidates2 = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 15, 16, 18, 20, 22, 24, 25])
	const candidates3 = ref([])
	const videoSrc = ref('')
	const videoParams1 = ref({
		flag: 0,
		compression: '',
		resolution: '',
		bitRateControl: '',
		quality: '',
		bitRate: '',
		fps: '',
		gop: '',
	})
	const videoParams2 = ref({
		flag: 1,
		compression: '',
		resolution: '',
		bitRateControl: '',
		quality: '',
		bitRate: '',
		fps: '',
		gop: '',
	})

	const phoneNo = ref()

	const option4 = ref([{
		text: '自动',
		value: 0
	},
	{
		text: '最高',
		value: 1
	},
	{
		text: '较高',
		value: 2
	},
	{
		text: '一般',
		value: 3
	},
	{
		text: '低',
		value: 4
	},
	{
		text: '较低',
		value: 5
	},
	{
		text: '最低',
		value: 6
	}
	])
	const option3 = ref([{
		text: '变码率',
		value: 0
	},
	{
		text: '定码率',
		value: 1
	},
	])

	const option2 = ref([{
		text: 'H.264',
		value: 100
	},
	{
		text: 'H.265',
		value: 108
	},
	])

	const option1 = ref([{
		text: '352*288',
		value: 4
	},
	{
		text: '704*576',
		value: 1
	},

	{
		text: '640*480',
		value: 6
	},

	{
		text: '1280*720',
		value: 200
	},

	{
		text: '1280*960',
		value: 201
	},
	{
		text: '1920*1080',
		value: 202
	}
	])




	const imgList = ['../../static/btn-1.png', '../../static/btn-2.png',
		'../../static/btn-3.png',
		'../../static/btn-4.png', '../../static/btn-5.png',
		'../../static/btn-6.png', '../../static/btn-7.png', '../../static/btn-8.png',
		'../../static/btn-9.png'
	]

	const enableImageList = ['../../static/binus.png', '../../static/plus.png',
		'../../static/border-1.png',
		'../../static/border-2.png', '../../static/circule-1.png',
		'../../static/circule-2.png'
	]

	const clickImgList = ['../../static/btn-click-1.png', '../../static/btn-click-2.png',
		'../../static/btn-click-3.png',
		'../../static/btn-click-4.png', '../../static/btn-click-5.png',
		'../../static/btn-click-6.png', '../../static/btn-click-7.png', '../../static/btn-click-8.png',
		'../../static/btn-click-9.png'
	]

	const clickEnableImageList = ['../../static/binus-click.png', '../../static/plus-click.png',
		'../../static/border-click-1.png', '../../static/border-click-2.png', '../../static/circule-click-1.png',
		'../../static/circule-click-2.png'
	]

	// 点击状态数组，用于跟踪每个图片是否被点击过
	const clickedState = ref(new Array(imgList.length).fill(false));

	const clickedEnableState = ref(new Array(enableImageList.length).fill(false));


	const ruler1 = {
		compression: {
			rules: [{
				required: true,
				errorMessage: '视频编码不能为空'
			}]
		},
		resolution: {
			rules: [{
				required: true,
				errorMessage: '分辨率不能为空'
			}]
		},
		bitRateControl: {
			rules: [{
				required: true,
				errorMessage: '码流控制模式不能为空'
			}]
		},
		quality: {
			rules: [{
				required: true,
				errorMessage: '图像质量不能为空'
			}]
		},
		bitRate: {
			rules: [{
				required: true,
				errorMessage: '码率上限不能为空'
			}]
		},
		fps: {
			rules: [{
				required: true,
				errorMessage: '帧率不能为空'
			}]
		},
		gop: {
			rules: [{
				required: true,
				errorMessage: 'I帧间隔不能为空'
			}]
		},

	}



	const sliderChange = (e) => {
		speed.value = e.detail.value
	}

	onLoad(async (options) => {
		const videoContext = uni.createVideoContext('video1', this)
		videoContext.pause()
		videoSrc.value = ''

		if (!Object.keys(options).length == 0) {
			station.value = JSON.parse(decodeURIComponent(options.item))
			videoSrc.value = station.value.rtspUrl
		}

		let filePath2 = '_doc/test/platform.json'
		let dataJson2 = await getJsonData(filePath2)
		if (dataJson2 === '') {
		} else {
			platformData.value = JSON.parse(dataJson2);
		}




		// station.value = {
		// 	videoData: {
		// 		videoPort: 8000,
		// 		videoUsername: "admin",
		// 		videoPassword: "njzt12345"
		// 	},
		// 	gatewayData: {
		// 		gatewayIP: "192.168.1.168",
		// 		gatewayPort: 8000,
		// 		gatewayPassword: 'njzt12345'
		// 	},
		// 	nvrIp: "192.168.1.168",
		// 	nvrPort: 8000,
		// 	channel: 33,
		// 	pageName: "videoConfigure"
		// }
		// videoSrc.value = `${WEB_URL}/real?m=mp4&mime=1&driver=hiknet&ip=${station.value.nvrIp}&port=${station.value.nvrPort}&user=${station.value.videoData.videoUsername}&pass=${station.value.videoData.videoPassword}&channel=${station.value.channel}`
		// nvr.value.ip = "192.168.1.168"
		// article.value = `${WEB_URL}/real?m=mp4&mime=1&driver=hiknet&ip=${station.value.nvrIp}&port=${station.value.nvrPort}&user=${station.value.videoData.videoUsername}&pass=${station.value.videoData.videoPassword}&channel=${station.value.channel}`
		// article.value =
		// 	`<video type="video/mp4" controls src="${WEB_URL}/real?m=mp4&mime=1&driver=hiknet&ip=${station.value.nvrIp}&port=${station.value.nvrPort}&user=${station.value.videoData.videoUsername}&pass=${station.value.videoData.videoPassword}&channel=${station.value.channel}" style="width:515px;" autoplay="autoplay" >
		// 	</video>`

		// article.value =
		// 	`<video controls style="width:515px;" autoplay="autoplay">
		// 					  <source src="http://iot.njsdjs.cn:15522/real?m=mp4&mime=1&driver=hiknet&ip=${station.value.nvrIp}&port=${station.value.nvrPort}&user=${station.value.videoData.videoUsername}&pass=${station.value.videoData.videoPassword}&channel=${station.value.channel}">
		// 					</video>`


		speed.value = 5

		await initVideoInfo()

	})


	// 获取当前图片的 src 属性
	const getImageSrc = (index) => {
		return clickedState.value[index] ? clickImgList[index] : imgList[index];
	};
	const getEnableImageSrc = (index) => {
		return clickedEnableState.value[index] ? clickEnableImageList[index] : enableImageList[index];
	};
	// 点击图片
	const handleImageClick = (index) => {
		clickedState.value[index] = !clickedState[index];

	};
	const handleEnableImageClick = (index) => {
		clickedEnableState.value[index] = !clickedEnableState[index];

	}

	//初始化video信息
	const initVideoInfo = async () => {
		let params = {
			driver: "hiknet",
			ip: station.value.nvrIp,
			port: station.value.nvrPort,
			user: station.value.videoData.videoUsername,
			pass: station.value.videoData.videoPassword,
			channel: station.value.channel,
		}
		return new Promise((resolve, reject) => {
			uni.request({
				url: WEB_URL + '/nvr?t=encode',
				data: params,
				method: 'POST',
				header: {
					'Content-Type': 'application/json'
				},
				dataType: 'json',
				success: (res) => {
					console.log(res.data);
					if (res.data.length > 1) {
						for (let i = 0; i < res.data.length; i++) {
							if (res.data[i].flag === 0) {
								let data = JSON.parse(JSON.stringify(res.data[i]));
								// console.log(data);
								videoParams1.value = data
							} else {
								let data = JSON.parse(JSON.stringify(res.data[i]));
								videoParams2.value = data
							}
						}
					} else {
						uni.showModal({
							title: '提示',
							content: res.data,
							confirmText: "确定",
							showCancel: false
						})
					}
					resolve('suc');
				},
				fail(err) {
					uni.showModal({
						title: '提示',
						content: '查询通道编码信息失败，系统异常',
						confirmText: "确定",
						showCancel: false,
					})
					reject('err')
				}
			})
		})
	}

	// watch(videoParams1.value, (newVal, oldVal) => {
	// 	videoParams1.value.gop = videoParams1.value.fps * 2
	// 	console.log(newVal)
	// })

	watch(() => videoParams1.value.fps, (newValue, oldValue) => {
		if (firstInit1.value === 1) {
			firstInit1.value = firstInit1.value + 1
		} else {
			if (newValue === '') {
				videoParams1.value.gop = ''
			} else {
				videoParams1.value.gop = newValue * 2
			}
		}

	}, {
		deep: true,
	})


	watch(() => videoParams2.value.fps, (newValue, oldValue) => {
		if (firstInit2.value === 1) {
			firstInit2.value = firstInit2.value + 1
		} else {
			if (newValue === '') {
				videoParams2.value.gop = ''
			} else {
				videoParams2.value.gop = newValue * 2
			}
		}

	}, {
		deep: true,
	})


	/**
	 * 云台控制
	 */
	const controlChannel = (index) => {
		// return new Promise((resolve, reject) => {
		uni.request({
			url: WEB_URL +
				`/ptz?cmd=${index}&speed=${speed.value}&driver=hiknet&ip=${station.value.nvrIp}&port=${station.value.nvrPort}&user=${station.value.videoData.videoUsername}&pass=${station.value.videoData.videoPassword}&channel=${station.value.channel}`,
			// data: params,
			method: 'POST',
			header: {
				'Content-Type': 'application/json'
			},
			dataType: 'json',
			success: (res) => {
				console.log(res)
			},
			fail(err) {
				console.log(err)
				// reject('err')
			}
		})
		// })
	}

	const moveStart = (index) => {
		clickedState.value[index] = true;
		// 镜头上下左右 0～8  距离10～11 焦距12～13 光圈14～15
		if (index === 0) {
			controlChannel(1025)
		}

		if (index === 1) {
			controlChannel(769)
		}

		if (index === 2) {
			controlChannel(1027)
		}

		if (index === 3) {
			controlChannel(771)
		}

		if (index === 4) {
			controlChannel(768)
		}

		if (index === 5) {
			controlChannel(772)
		}

		if (index === 6) {
			controlChannel(1026)
		}

		if (index === 7) {
			controlChannel(770)
		}

		if (index === 8) {
			controlChannel(1028)
		}

	}


	const submitVideoConfig = async () => {
		const valid1 = await videoForm1.value.validate();
		const valid2 = await videoForm2.value.validate();
		if (valid1) {
		}
		if (valid2) {

		}
		let encode = []
		encode.push(videoParams1.value)
		encode.push(videoParams2.value)
		let params = {
			driver: "hiknet",
			ip: station.value.nvrIp,
			port: station.value.nvrPort,
			user: station.value.videoData.videoUsername,
			pass: station.value.videoData.videoPassword,
			channel: station.value.channel,
			encode: encode
		}
		uni.request({
			url: WEB_URL + '/nvr?t=setencode',
			data: params,
			method: 'POST',
			header: {
				'Content-Type': 'application/json'
			},
			dataType: 'json',
			success: (res) => {
				if (!res.data.toString().includes("OK")) {
					uni.showModal({
						title: '提示',
						content: res.data,
						confirmText: "确定",
						showCancel: false,
					})
				} else {
					uni.showToast({
						title: '设置编码信息成功',
						icon: 'success',
						duration: 1500
					});
					// uni.redirectTo({
					// 	url: '/pages/videoPreview/videoPreview'
					// });
				}


			},
			fail(err) {
				uni.showModal({
					title: '提示',
					content: '设置编码信息失败，系统异常',
					confirmText: "确定",
					showCancel: false,
				})
			}
		})

	}

	const copy = () => {
		//深拷贝后复制
		// let param = JSON.parse(JSON.stringify(videoParams1.value));
		// videoParams2.value = param
		uni.showModal({
			title: '提示',
			content: '是否将该配置复制到所有摄像机?',
			confirmText: "确定",
			cancelText: "取消",
			showCancel: true,
			success: (res) => {
				let encode = []
				encode.push(videoParams1.value)
				encode.push(videoParams2.value)

				for (var i = 0; i < station.value.other.length; i++) {
					let params = {
						driver: "hiknet",
						ip: station.value.nvrIp,
						port: station.value.nvrPort,
						user: station.value.videoData.videoUsername,
						pass: station.value.videoData.videoPassword,
						channel: station.value.other[i].channel,
						encode: encode
					}

					uni.request({
						url: WEB_URL + '/nvr?t=setencode',
						data: params,
						method: 'POST',
						header: {
							'Content-Type': 'application/json'
						},
						dataType: 'json',
						success: (res) => {
							if (!res.data.toString().includes("OK")) {
								uni.showModal({
									title: '提示',
									content: res.data,
									confirmText: "确定",
									showCancel: false,
								})
							} else {

							}
							// encode = []
						},
						fail(err) {
							uni.showModal({
								title: '提示',
								content: '设置编码信息失败，系统异常',
								confirmText: "确定",
								showCancel: false,
							})
							// encode = []
						}
					})
				}
			}
		})
		uni.showToast({
			title: '设置编码信息成功',
			icon: 'success',
			duration: 1500
		});
	}

	const moveStartEnable = (index) => {
		clickedEnableState.value[index] = true;
		console.log(index);
		if (index === 0) {
			controlChannel(1282)
		}

		if (index === 1) {
			controlChannel(1281)
		}


		if (index === 2) {
			controlChannel(1537)
		}


		if (index === 3) {
			controlChannel(1538)
		}


		if (index === 4) {
			controlChannel(2306)
		}


		if (index === 5) {
			controlChannel(2305)
		}
	}


	const moveStop = (index) => {
		clickedState.value[index] = false;
		controlChannel(768)
	}

	const moveStopEnable = (index) => {
		clickedEnableState.value[index] = false
		controlChannel(768)
	}
</script>

<style>
	.flex-space {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex {
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.flex-width {
		margin: 0 auto;
		width: 530px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	/* 基本样式 */
	.video-device-form {
		padding: 45px 20px;
		background-color: #f7f7f7;
		border-radius: 8px;

	}


	.video-device-container {
		/* border: 1px solid red; */
		padding: 20px;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		border-radius: 5px;
	}

	.form-header {
		font-size: 24px;
		color: #666;
	}

	/* 视频设备信息样式 */
	.video-device-info {
		margin-top: 30px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		/* 项目之间的间距 */
		margin-bottom: 20px;
	}

	.info-item {
		flex: 1 1 calc(50% - 20px);
		/* 每个项目占50%宽度减去间距 */
		display: flex;
		align-items: center;
		/* 垂直居中对齐 */
		gap: 10px;
	}

	.label {
		font-size: 18px;
		color: #666;
		width: 120px;
		text-align: right;
		flex-shrink: 0;
		padding-right: 10px;
	}

	.input {
		padding: 8px;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 18px;

	}

	/* 视频样式 */
	.video {
		margin-top: 20px;
		padding: 20px;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		position: relative;
	}



	.video-preview2 {
		margin: 0 auto;
		width: 515px;
		height: 100%;
		position: relative;
		overflow: hidden;
		margin-top: 20px;
	}

	.video-preview {
		display: block;
		margin: 20px auto 0;
		width: 515px;
		height: auto;
		max-width: 100%;
	}

	.video-preview>>>video {
		width: 515px;
		display: block;
		margin: 0 auto;
	}



	.icon {
		width: 100%;
		height: 100%;
	}

	.VideoControl {
		min-width: 100%;
		min-height: 100%;
		width: 100%;
		/* height: 400px; */
	}

	.video-control {
		/* border: 1px solid red; */
		/* margin-left: 20px; */
		display: flex;
		flex-direction: column;
		gap: 10px 10px;
	}

	.control-title {
		font-size: 24px;
		color: #666;
	}

	.control-btn-start {
		/* display: flex; */
		/* width: 100px; */

	}

	.control-btn-container {
		margin-top: 20px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 15px;
	}

	.control-btn {
		border: 1px solid #ddd;
		padding: 10px;
		border-radius: 4px;
		width: 45px;
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: center;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.control-enablebtn-container {
		margin-top: 20px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}

	/* .control-enablebtn {
		border: 1px solid blue;
	} */

	.control-row {
		display: flex;
		gap: 10px 10px;
	}

	.control-button {
		padding: 8px 12px;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 14px;
		cursor: pointer;
	}

	.control-button:hover {
		background-color: #e9ecef;
	}

	/* 参数配置样式 */
	.parameter-container {
		margin-top: 20px;
		padding: 20px;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		border-radius: 5px;
	}

	.parameter-section {
		margin-bottom: 20px;

		/* display: flex;
		align-items: center; */
		h3 {

			font-size: 24px;
			color: #666;
		}
	}

	.parameter-row {
		/* display: flex;
		align-items: center; */
		/* border: 1px solid red; */
		margin: 20px;
	}

	.form-row {
		margin-top: 20px;
	}

	.parameter-label {
		/* font-weight: bold; */
		font-size: 20px;
		color: #5dc7c8;
		margin-right: 10px;
	}

	.parameter-inputs {
		/* 	display: flex;
		flex-wrap: wrap;
		gap: 10px; */
		margin-top: 20px;
		font-size: 16px;
		color: #666;

	}

	.parameter-input {
		display: flex;
		align-items: center;
		justify-content: center;

		margin: 10px;

	}

	.parameter-input label {
		margin-right: 5px;
	}



	.uni-combox__input-plac {
		color: #6a6a6a !important;
		font-size: 15px !important;
	}

	.uni-easyinput__placeholder-class {
		color: #6a6a6a !important;
		font-size: 15px !important;
	}

	.select {
		padding: 8px;
		/* margin: 10px; */
		width: 200px;
		font-size: 16px;
		border: 1px solid #ddd;

		border-radius: 4px;

	}

	.button-container {
		display: flex;
		justify-content: center;
		align-items: center;
		/* gap: 10px; */
		/* margin-top: 20px; */
	}

	.copy-button {
		padding: 0 15px;
		background-color: #5dc7c8 !important;
		/* color: #fff; */
	}

	.save-button {
		padding: 0 40px;
		background-color: #55aaff !important;
		/* color: #fff; */
	}

	/* 	.button {
		padding: 0 15px;
		margin-left: 3px;
	} */

	.start-button {
		padding: 0 15px;
		background-color: #55aaff !important;
		/* color: #fff; */
	}

	.stop-button {
		margin-top: 20px;
		padding: 0 15px;
		background-color: #ff4d4f !important;
		/* color: #fff; */
	}
</style>